<template>
<div class="menuContent">
    <div class="menuTopBox">
        <div class="menuTopBoxL" @click="goMusic">
            <!-- <Dice @go3D="go3D" v-if="diceShow"></Dice> -->
            <SvgIcon width="50px" height="50px" name="weiMusic" color="#a49144" style="margin-bottom: 20px;opacity: 0.5;"></SvgIcon>
            <p>Enjoy Your Music</p>
            <p>尽情享受您的音乐</p>
            <p>
                进入
                <van-icon name="play-circle-o" size="25" style="margin-left: 5px;" />
            </p>
        </div>
        <div class="menuTopBoxR">
            <div class="menuTopBoxRT" @click.stop="goGame">
                <div class="menuTopBoxRT_top" :class="{move: isAction}">
                    <p class="menuTopBoxRT_top_today">{{ today }}</p>
                </div>
                <div class="menuTopBoxRT_bottom">
                    <p class="menuTopBoxRT_bottom_week">{{ getWeek() }}</p>
                </div>
            </div>
            <div class="menuTopBoxRB" :class="{move: isAction}" @click="move">
                <div class="menuTopBoxRB_Item"></div>
                <div class="menuTopBoxRB_Item"></div>
                <div class="menuTopBoxRB_Item"></div>
            </div>
        </div>
    </div>
    <div class="menuMainBox">
        <div class="menuMainBoxItem" v-for="(item, index) in menuDataList" :key="item.id" @click="goMenuData(item)">
            <div class="menuMainBoxItemLeft">
                <div class="menuMainBoxItemLeftIcon">
                    <SvgIcon width="40px" height="40px" :name="item.icon" color="#f5c3cb"></SvgIcon>
                </div>
                <div class="menuMainBoxItemLeftTitle">
                    <span class="menuMainBoxItemLeftTitle1">{{ item.title }}</span>
                    <span class="menuMainBoxItemLeftTitle2">{{ item.text }}</span>
                </div>
            </div>
            <div class="menuMainBoxItemRight">
                <van-icon name="arrow"size="20" />
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog, showNotify } from 'vant'
import { getWeek, whatTime } from '@/utils/plugins'
import { debounce } from 'lodash';
import useSettingStore from '@/store/modules/setting'
import menuStore from '@/store/modules/menuDataList'

const settings = useSettingStore()
const menuStoreList = menuStore()



const route = useRoute()
const router = useRouter()

const today = computed(() => {
    const currentDate = new Date();
    const day = currentDate.getDate();
    return `${day}`
});

const menuDataList = ref<any>([])

const isAction = ref(false)

const isFirstCall = ref<boolean>(true)
const move = () => {
    if (isFirstCall.value) {
        isAction.value = true
        setTimeout(() => {
            isAction.value = false
        }, 1000)
        isFirstCall.value = false
    } else {
        moveDetails()
    }
}
const moveDetails = debounce(() => {
    console.log('move')
    isAction.value = true
    setTimeout(() => {
        isAction.value = false
    }, 1000)
}, 500); // 500毫秒内的多次触发只执行一次

const goMenuData = (item: any) => {
    if (item.path == '') {
        showToast('功能开发中，敬请期待！')
    }
    if (item.list && item.list.length > 0) {
        let _arr: any = []
        item.list.forEach((ele: any) => {
            _arr.push(JSON.parse(JSON.stringify(ele)))
        })
        menuStoreList.handlerSetMenuItemDataList(_arr)
    }
    router.push({
        path: item.path,
        query: {
            // title: item.title
        }
    })
}

const go3D = () => {
    router.push({
        path: '/home'
    })
    return
    showToast('3D区暂未开放！')
}

const goMusic = () => {
    router.push({
        path: '/weiMusic'
    })
    return
}

const goGame = () => {
    router.push({
        path: '/weiGame'
    })
    return
}

const showShowNotify = () => {
    if (sessionStorage.getItem('firstUse') == '0') return
    sessionStorage.setItem('firstUse', '1')
    showNotify({
        message: `Hi~ ${whatTime()}好！`,
        color: '#FFFFFF',
        background: '#bca1f3',
        duration: 1500, // 持续时间，单位为毫秒
        position: 'top', // 位置，可以是 'top'、'bottom'、'top-left'、'top-right'、'bottom-left'、'bottom-right'
    });
    sessionStorage.setItem('firstUse', '0')
}

onMounted(() => {
    // (window as any).showGlobalLoading()
    if (menuStoreList.menuDataList && menuStoreList.menuDataList.length) {
        menuDataList.value = menuStoreList.menuDataList
    }
    nextTick(() => {
        settings.handlerHeaderShow(true)
        settings.handlerFooterShow(true)
        showShowNotify()
    })
})

</script>


<style lang="scss" scoped>
.menuContent {
    width: 100%;
    padding: 15px;
    position: relative;
    .menuTopBox {
        width: 100%;
        height: 210px;
        display: flex;
        flex-direction: row;
        .menuTopBoxL {
            width: 100%;
            height: 210px;
            // background-color: #f5c3cb;
            background: url('@/assets/img/songEntrance.jpg') no-repeat;
            background-size: 100% 100%;
            border-radius: 30px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: end;
            p {
                font-size: 16px;
                font-weight: 700;
                color: #dbdddf;
                margin-bottom: 10px;
            }
            :nth-child(3) {
                font-size: 10px;
                font-weight: 300;
                opacity: 0.8;
                margin-bottom: 10px;
            }
            :nth-child(4) {
                font-size: 12px;
                font-weight: 300;
                margin-bottom: 5px;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
        .menuTopBoxR {
            margin-left: 10px;
            width: 100%;
            height: 210px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .menuTopBoxRT {
                width: 100%;
                height: 67%;
                // background-color: #97cce8;
                background: url("@/assets/img/game1.jpg") no-repeat center / cover;
                border-radius: 30px;
                box-sizing: border-box;
                overflow: hidden;
                color: #333;
                // color: #0d2583;
                font-weight: 500;
                .menuTopBoxRT_top {
                    width: 100%;
                    height: 65%;
                    display: flex;
                    align-items: center;
                    .menuTopBoxRT_top_today {
                        margin-left: 20px;
                        font-family: "Arial", sans-serif;
                        font-size: 50px;
                    }
                }
                .menuTopBoxRT_bottom {
                    width: 100%;
                    height: 35%;
                    .menuTopBoxRT_bottom_week {
                        margin-left: 20px;
                        margin-bottom: 5px;
                    }
                }
            }
            .menuTopBoxRB {
                margin-top: 10px;
                padding: 0 5px;
                width: 100%;
                height: 33%;
                // background-color: #bca1f3;
                background: url("@/assets/img/game1.jpg") no-repeat center / cover;
                border-radius: 30px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                overflow: hidden;
                position: relative;
                .menuTopBoxRB_Item {
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    background-color: #FFF;
                    outline: 12px solid rgba(0, 0, 0, 0.2); /* 边框宽度 样式 颜色 */
                    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2); /* 磨砂效果 */
                    opacity: 0.9;
                }
            }
        }
        .move {
            animation: rotate .5s linear infinite;
        }
        @keyframes rotate {
            0% {
                transform: translateY(0) ;
            }
            25% {
                transform: translateY(10px);
            }
            50% {
                transform: translateY(20px) scale(1.1, 0.9);
            }
            75% {
                transform: translateY(10px) ;
            }
            100% {
                transform: translateY(0) ;
            }
        }
    }
    .menuMainBox {
        width: 100%;
        margin-top: 25px;
        padding: 0 5px;
        .menuMainBoxItem {
            width: 100%;
            height: 70px;
            background-color: var(--background);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.5px solid #eee;
            .menuMainBoxItemLeft {
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                .menuMainBoxItemLeftIcon {
                    margin-right: 20px;
                }
                .menuMainBoxItemLeftTitle {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .menuMainBoxItemLeftTitle1 {
                        margin-top: 10px;
                        font-size: 14px;
                        font-weight: 500;
                    }
                    .menuMainBoxItemLeftTitle2 {
                        font-size: 12px;
                        color: rgb(128, 128, 128);
                        margin-bottom: 10px;
                    }
                }
            }
            .menuMainBoxItemRight {
            }
        }
    }
}
</style>